<template>
  <div>
    <el-dialog
      title="选择课程"
      :visible.sync="dialogVisible"
      :before-close="handleClose">
      <a-table :data='data' :cols='tableKeys'>
      </a-table>
      <div class='u-pagination'>
        <!-- 分页 -->
        <pagination ref='page' @change='getData' :action='fetchData' :pageSize='5'></pagination>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'u-courseSignUpDialog',

  data() {
    return {
      dialogVisible: false,
      tableKeys: [
        { prop: 'name', label: '课程时间', minWidth: '100' },
        { prop: 'name1', label: '课程名称', minWidth: '100' },
        { prop: 'name2', label: '所属分类', minWidth: '100' },
        { prop: 'name3', label: '目前人数', minWidth: '100' },
        { prop: 'name4', label: '价格', minWidth: '100' },
        { prop: 'name5', label: '状态', minWidth: '100' }
      ],
      data: []
    }
  },

  mounted() {
  },

  methods: {
    show() {
      this.dialogVisible = true
      this.$nextTick(() => {
        if (this.data.length <= 0) {
          this.$refs.page.changePage()
        }
      })
    },

    async fetchData(aPageNum, aPageSize) {
      return this.$api.firmGetDepartments({
        aPageNum,
        aPageSize,
        aFirmId: this.aFirmId
      })
    },

    getData(data) {
      this.data = data
    },

    handleClose() {
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped>

</style>